import React from 'react'
import PropTypes from 'prop-types'
import styles from './index.module.css'

export default class HouseItem extends React.Component {
  render() {
    const { src, title, desc, tags, price, onClick,style } = this.props
    return (
      <div className={styles.house} onClick={onClick} style={style}>
        <div className={styles.imgWrap}>
          <img
            className={styles.img}
            src={src}
            alt=""
          />
        </div>
        <div className={styles.content}>
          <h3 className={styles.title}>{title}</h3>
          <div className={styles.desc}>{desc}</div>
          <div>
            {/* ['近地铁', '随时看房'] */}
            {tags.map((tag, index) => {
              const tagClass = "tag" + (index + 1);
              return (
                <span
                  className={[styles.tag, styles[tagClass]].join(" ")}
                  key={tag}
                >
                  {tag}
                </span>
              );
            })}
          </div>
          <div className={styles.price}>
            <span className={styles.priceNum}>{price}</span> 元/月
          </div>
        </div>
      </div>
    )
  }
}

// props 校验
HouseItem.propTypes = {
  src: PropTypes.string,
  title: PropTypes.string,
  desc: PropTypes.string,
  tags: PropTypes.array.isRequired,
  price: PropTypes.number,
  onClick: PropTypes.func
}

// // 封装的解构源码
// <div className={styles.house} key={item.houseCode}>
//         <div className={styles.imgWrap}>
//           <img
//             className={styles.img}
//             src={BASE_URL + item.houseImg}
//             alt=""
//           />
//         </div>
//         <div className={styles.content}>
//           <h3 className={styles.title}>{item.title}</h3>
//           <div className={styles.desc}>{item.desc}</div>
//           <div>
//             {/* ['近地铁', '随时看房'] */}
//             {item.tags.map((tag, index) => {
//               const tagClass = "tag" + (index + 1);
//               return (
//                 <span
//                   className={[styles.tag, styles[tagClass]].join(" ")}
//                   key={tag}
//                 >
//                   {tag}
//                 </span>
//               );
//             })}
//           </div>
//           <div className={styles.price}>
//             <span className={styles.priceNum}>{item.price}</span> 元/月
//           </div>
//         </div>
//       </div>